<!doctype html>
<html lang="zh-CN">
<head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <title>奇点短视频</title>
    <!-- Template CSS -->
    <!--
        <link rel="stylesheet" th:href="@{/static/css/bootstrap.min.css}">
    -->
    <link rel="stylesheet" th:href="@{/static/css/style-starter.css}">
    <script th:src="@{/static/layui.js}"></script>
    <script th:src="@{/static/js/jquery-1.9.1.min.js}"></script>
    <script th:src="@{/static/js/bootstrap.min.js}"></script>
    <link rel="stylesheet" th:href="@{/static/css/layui.css}">
    <style>
        /* 更新后的对齐样式 */
        .user-center-card {
            max-width: 580px;
            margin: 60px auto 40px auto;
            background: #fff;
            border-radius: 16px;
            box-shadow: 0 8px 32px rgba(102, 126, 234, 0.1);
            padding: 40px 36px 32px;
            border: 3px solid;
            border-color: var(--theme-rose, #df0e62);
            border-image: none;
            transition: all 0.3s ease;
        }

        /* 表单对齐优化 */
        .layui-form {
            width: 100%;
            max-width: 480px;
            margin: 0 auto;
        }

        .layui-form-item {
            display: flex;
            align-items: center;
            margin-bottom: 20px;
        }

        .layui-form-label {
            width: 120px !important;
            text-align: right;
            padding-right: 15px;
            box-sizing: border-box;
            flex-shrink: 0;
        }

        .layui-input-block, .layui-input-inline {
            flex: 1;
            min-width: 0;
        }

        .layui-input-inline {
            width: auto !important;
        }

        /* 头像上传区域对齐 */
        .avatar-upload-container {
            text-align: center;
            margin-bottom: 25px;
        }

        .avatar-upload-wrapper {
            display: inline-flex;
            flex-direction: column;
            align-items: center;
        }

        .avatar-upload-btn {
            margin-bottom: 15px;
        }

        .avatar-preview {
            width: 120px;
            height: 120px;
            border-radius: 50%;
            overflow: hidden;
            border: 3px solid #fff;
            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
            margin-bottom: 15px;
        }

        .avatar-preview img {
            width: 100%;
            height: 100%;
            object-fit: cover;
        }

        .progress-container {
            width: 80%;
            margin: 0 auto;
        }

        /* 按钮区域对齐 */
        .form-submit-btn {
            text-align: center;
            margin-top: 30px;
        }

        .privacy-btn-area {
            text-align: center;
            margin-top: 25px;
        }

        .privacy-btn-area, .form-submit-btn {
            display: flex;
            justify-content: flex-end;
            gap: 16px;
            margin-top: 25px;
        }
        @media (max-width: 768px) {
            .privacy-btn-area, .form-submit-btn {
                flex-direction: column;
                align-items: stretch;
                gap: 10px;
            }
        }

        /* 性别选择对齐 */
        .gender-radio-group {
            display: flex;
            align-items: center;
        }

        .gender-radio-item {
            display: flex;
            align-items: center;
            margin-right: 20px;
        }

        /* 响应式调整 */
        @media (max-width: 768px) {
            .user-center-card {
                padding: 30px 20px;
                margin: 40px auto 30px;
                border-radius: 12px;
            }

            .layui-form-item {
                flex-direction: column;
                align-items: flex-start;
            }

            .layui-form-label {
                width: 100% !important;
                text-align: left;
                padding-right: 0;
                margin-bottom: 8px;
            }

            .layui-input-block, .layui-input-inline {
                width: 100% !important;
            }

            .gender-radio-group {
                flex-direction: row;
                flex-wrap: wrap;
            }

            .gender-radio-item {
                margin-bottom: 8px;
            }
        }

        @media (max-width: 480px) {
            .user-center-card {
                padding: 24px 16px;
                margin: 30px auto;
                border-radius: 10px;
            }

            .user-center-card h2 {
                font-size: 1.5em;
                margin-bottom: 24px;
            }

            .avatar-preview {
                width: 100px;
                height: 100px;
            }
        }
        .form-action-row {
            display: flex;
            justify-content: center;
            gap: 16px;
        }
        @media (max-width: 768px) {
            .form-action-row {
                flex-direction: column;
                align-items: stretch;
                gap: 10px;
            }
        }
    </style>
</head>

<body>

<!-- header -->
<header id="site-header" class="w3l-header fixed-top">
    <!--/nav-->
    <nav class="navbar navbar-expand-lg navbar-light fill px-lg-0 py-0 px-3">
        <div class="container">
            <h1><a class="navbar-brand" href="index.html">
                奇点短视频 </a></h1>
            <button class="navbar-toggler collapsed" type="button" data-toggle="collapse"
                    data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false"
                    aria-label="Toggle navigation">
                <!-- <span class="navbar-toggler-icon"></span> -->
                <span class="fa icon-expand fa-bars"></span>
                <span class="fa icon-close fa-times"></span>
            </button>

            <div class="collapse navbar-collapse" id="navbarSupportedContent">
                <ul class="navbar-nav ml-auto">
                    <li class="nav-item active">
                        <a class="nav-link" th:href="@{/user/toIndex}">主页</a>
                    </li>
<!--                    <li class="nav-item">-->
<!--                        <a class="nav-link" href="#">关于我们</a>-->
<!--                    </li>-->
<!--                    <li class="nav-item">-->
<!--                        <a class="nav-link" href="#">联系我们</a>-->
<!--                    </li>-->
                </ul>

                <!--/search-right-->
                <!--/search-right-->
                <div class="search-right">
                    <a href="#search" class="btn search-hny mr-lg-3 mt-lg-0 mt-4" title="search">搜索<span
                            class="fa fa-search ml-3" aria-hidden="true"></span></a>
                    <!-- search popup -->
                    <div id="search" class="pop-overlay">
                        <div class="popup">
                            <form th:action="@{/video/search}" method="post" class="search-box">
                                <input type="search" placeholder="Search your Keyword" name="videoTitle"
                                       required="required" autofocus="">
                                <button type="submit" class="btn"><span class="fa fa-search"
                                                                        aria-hidden="true"></span></button>
                            </form>
                            <div class="browse-items">
                                <h3 class="hny-title two mt-md-5 mt-4">荣光影视搜索</h3>
                                <ul class="search-items">
                                    <li><a href="#">影视</a></li>
                                    <li><a href="#">新闻</a></li>
                                    <li><a href="#">生活</a></li>
                                    <li><a href="#">美食</a></li>
                                    <li><a href="#">音乐</a></li>
                                    <li><a href="#">电视剧</a></li>
                                    <li><a href="#">舞蹈</a></li>
                                    <li><a href="#">动漫</a></li>
                                    <li><a href="#">娱乐</a></li>
                                    <li><a href="#">科技数码</a></li>
                                    <li><a href="#">体育</a></li>
                                    <li><a href="#">美妆</a></li>
                                </ul>
                            </div>
                        </div>
                        <a class="close" href="#close">×</a>
                    </div>
                    <!-- /search popup -->
                    <!--/search-right-->
                </div>


            </div>
            <!-- toggle switch for light and dark theme -->
            <div class="mobile-position">
                <nav class="navigation">
                    <div class="theme-switch-wrapper">
                        <label class="theme-switch" for="checkbox">
                            <input type="checkbox" id="checkbox">
                            <div class="mode-container">
                                <i class="gg-sun"></i>
                                <i class="gg-moon"></i>
                            </div>
                        </label>
                    </div>
                </nav>
            </div>
            <!-- //toggle switch for light and dark theme -->
            <!--<button type="button" class="btn btn-primary btn-lg active">登录</button>-->
            <div th:unless="${session.user}">
                <a th:href="@{/user/toLogin}" class="btn btn-primary btn-lg"
                   style="height: 38px;font-size: 14px;">登录</a>
            </div>
            <div th:if="${session.user}">
                <button class="layui-btn layui-btn-primary" id="demo4">
                    <span th:text="${session.user.userName}"></span>
                    <i class="layui-icon layui-icon-more-vertical layui-font-12">
                    </i>
                </button>
                <!--
                                <img th:src="@{/static/img/1.jpg}" class="img-circle">
                -->
            </div>
        </div>
    </nav>
    <!--//nav-->
</header>
<!-- //header -->
<section class="w3l-grids">
    <div class="grids-main py-5">
        <div class="container py-lg-3">
            <center>
            <div class="user-center-card">
                <h2>个人中心</h2>

                <!--头像上传begin-->
                <div class="layui-upload">
                    <button type="button" class="layui-btn" id="test1" style="background: var(--theme-rose); border: 1px solid var(--theme-rose); color: #fff;">修改头像</button>
                    <div class="layui-upload-list" style="width: 100px;height: 100px;">
                        <img style="height: 100%; width: 100%;" class="layui-upload-img" id="demo1">
                        <p id="demoText"></p>
                    </div>
                </div>
                <div style="width:300px;">
                    <div class="layui-progress layui-progress-big" lay-showpercent="yes" lay-filter="demo">
                        <div class="layui-progress-bar" lay-percent=""></div>
                    </div>
                </div>
                <p style="margin-top: 10px; color: #666;">可轻松配合进度条使用</p><p>
            </p><div style="margin-top: 10px;">

                <!-- 示例-970 -->
                <ins class="adsbygoogle" style="display:inline-block;width:970px;height:90px" data-ad-client="ca-pub-6111334333458862" data-ad-slot="3820120620"></ins>

            </div>


                <!--头像上传-->
                <form method="post" class="layui-form" th:action="@{/user/UEditorUser}" onsubmit="return validateUserForm();">
                        <input type="hidden" name="userId" th:value="${session.user.userId}">
                        <div class="layui-form-item">
                            <label class="layui-form-label" style="width: 100px;">用户昵称</label>
                            <div class="layui-input-inline">
                                <input type="text" name="userName" required lay-verify="required"
                                       th:value="${session.user.userName}" autocomplete="off" class="layui-input">
                            </div>
                            <div class="layui-form-mid layui-word-aux" ></div>
                        </div>
                        <div class="layui-form-item">
                            <label class="layui-form-label" style="width: 100px;">老密码</label>
                            <div class="layui-input-inline">
                                <input type="password" name="oldPassword" id="oldPassword"
                                       placeholder="请输入老密码" autocomplete="off" class="layui-input">
                            </div>
                            <div class="layui-form-mid layui-word-aux"></div>
                        </div>
                        <div class="layui-form-item">
                            <label class="layui-form-label" style="width: 100px;">新密码</label>
                            <div class="layui-input-inline">
                                <input type="password" name="prePassword" id="prePassword"
                                       placeholder="请输入新密码" autocomplete="off" class="layui-input">
                            </div>
                            <div class="layui-form-mid layui-word-aux"></div>
                        </div>
                        <div class="layui-form-item">
                            <label class="layui-form-label" style="width: 100px;">确认密码</label>
                            <div class="layui-input-inline">
                                <input type="password" name="password" id="password"
                                       placeholder="请输入再次确认密码" autocomplete="off" class="layui-input">
                            </div>
                            <div class="layui-form-mid layui-word-aux"></div>
                        </div>
                        <div class="layui-form-item">
                            <label class="layui-form-label" style="width: 100px;">性别</label>
                            <div class="layui-input-inline">
                                <input type="radio" name="userSex" value="男" title="男" checked>
                                <input type="radio" name="userSex" value="女" title="女">
                            </div>
                        </div>
                        <div class="layui-form-item">
                            <label class="layui-form-label" style="width: 100px;">年龄</label>
                            <div class="layui-input-inline">
                                <input type="text" name="userAge"
                                       placeholder="请输入年龄（可选）" autocomplete="off" class="layui-input">
                            </div>
                            <div class="layui-form-mid layui-word-aux"></div>
                        </div>
                        <div class="layui-form-item">
                            <label class="layui-form-label" style="width: 100px;">密保</label>
                            <div class="layui-input-inline">
                                <input type="text" name="preEncryptedProblem" id="preEncryptedProblem"
                                       placeholder="你最喜欢的书是什么" autocomplete="off" class="layui-input" required>
                            </div>
                            <div class="layui-form-mid layui-word-aux"></div>
                        </div>
                        <div class="layui-form-item">
                            <label class="layui-form-label" style="width: 100px;">修改密保</label>
                            <div class="layui-input-inline">
                                <input type="text" name="encryptedProblem" id="encryptedProblem"
                                       placeholder="你最喜欢的书是什么" autocomplete="off" class="layui-input">
                            </div>
                            <div class="layui-form-mid layui-word-aux"></div>
                        </div>
                        <div class="layui-form-item">
                            <div class="layui-input-block form-action-row">
                                <button type="submit" class="layui-btn" lay-submit lay-filter="formDemo">立即提交</button>
                                <a href="/privacy_settings" class="layui-btn" style="background: var(--theme-rose); border: 1px solid var(--theme-rose); color: #fff;">
                                    <i class="fa fa-shield" style="margin-right:8px;"></i>隐私设置
                                </a>
                            </div>
                        </div>
                    </form>
            </div>
            </center>
        </div>
    </div>
</section>


<footer class="w3l-footer">
    <section class="footer-inner-main">
        </div>
        <div class="below-section">
            <div class="container">
                <div class="copyright-footer">
                    <div class="columns text-lg-left">
                    </div>
                </div>
            </div>
        </div>
        <!-- copyright -->
        <!-- move top -->
        <button onclick="topFunction()" id="movetop" title="Go to top">
            <span class="fa fa-arrow-up" aria-hidden="true"></span>
        </button>
        <script>
            // When the user scrolls down 20px from the top of the document, show the button
            window.onscroll = function () {
                scrollFunction()
            };

            function scrollFunction() {
                if (document.body.scrollTop > 20 || document.documentElement.scrollTop > 20) {
                    document.getElementById("movetop").style.display = "block";
                } else {
                    document.getElementById("movetop").style.display = "none";
                }
            }

            // When the user clicks on the button, scroll to the top of the document
            function topFunction() {
                document.body.scrollTop = 0;
                document.documentElement.scrollTop = 0;
            }
        </script>
        <!-- /move top -->

    </section>
</footer>
<!--//footer-66 -->
</body>

</html>
<!-- responsive tabs -->
<script>

    layui.use(['upload', 'element', 'form', 'dropdown', 'util', 'layer'], function () {
        /*<![CDATA[*/
        var ctxPath = /*[[@{/}]]*/ '';
        /*]]>*/
        var dropdown = layui.dropdown
            , util = layui.util
            , layer = layui.layer
            , form = layui.form
            ,element = layui.element
            ,upload = layui.upload
            , $ = layui.jquery;
        form.on('submit(formDemo)', function (data) {
            // layer.msg(JSON.stringify(data.field)); // 去除调试弹窗
        });

        var uploadInst = upload.render({
            elem: '#test1'
            ,url: '/user/upload' //改成您自己的上传接口
            ,before: function(obj){
                //预读本地文件示例，不支持ie8
                obj.preview(function(index, file, result){
                    $('#demo1').attr('src', result); //图片链接（base64）
                });

                element.progress('demo', '0%'); //进度条复位
                layer.msg('上传中', {icon: 16, time: 0});
            }
            ,done: function(res){
                //如果上传失败
                if(res.code > 0){
                    return layer.msg('上传失败');
                }
                //上传成功的一些操作
                //……
                $('#demoText').html(''); //置空上传失败的状态
            }
            ,error: function(){
                //演示失败状态，并实现重传
                var demoText = $('#demoText');
                demoText.html('<span style="color: #FF5722;">上传失败</span> <a class="layui-btn layui-btn-xs demo-reload">重试</a>');
                demoText.find('.demo-reload').on('click', function(){
                    uploadInst.upload();
                });
            }
            //进度条
            ,progress: function(n, index, e){
                element.progress('demo', n + '%'); //可配合 layui 进度条元素使用
                if(n == 100){
                    layer.msg('上传完毕', {icon: 1});
                }
            }
        });

        dropdown.render({
            elem: '#demo4'
            , trigger: 'hover'
            , data: [
                {
                    title: '个人中心'
                    , href: '/user/toUEditorUser'
                    , id: 100
                }, {
                    title: "消息中心"
                    , href: '/user/toMessage'
                    , id: 101
                }, {
                    title: '视频中心'
                    ,href: '/video/toVideoCenter'
                    , id: 101
                }, {
                    title: '视频上传'
                    ,href: '/video/toAddVideo'
                    , id: 102
                }, {
                    title: '退出'
                    ,href: '/user/logout'
                    , id: 103
                }
            ]
        });    })
</script>
<script th:src="@{/static/js/easyResponsiveTabs.js}"></script>
<script type="text/javascript">
    $(document).ready(function () {
        //Horizontal Tab
        $('#parentHorizontalTab').easyResponsiveTabs({
            type: 'default', //Types: default, vertical, accordion
            width: 'auto', //auto or any width like 600px
            fit: true, // 100% fit in a container
            tabidentify: 'hor_1', // The tab groups identifier
            activate: function (event) { // Callback function if tab is switched
                var $tab = $(this);
                var $info = $('#nested-tabInfo');
                var $name = $('span', $info);
                $name.text($tab.text());
                $info.show();
            }
        });
    });
</script>
<!-- //responsive tabs -->
<!--/theme-change-->
<script th:src="@{/static/js/theme-change.js}"></script>
<!-- //theme-change-->
<!-- script for owlcarousel -->
<!-- Template JavaScript -->
<script th:src="@{/static/js/jquery.magnific-popup.min.js}"></script>
<!--
<script>
  $(document).ready(function () {
    $('.popup-with-zoom-anim').magnificPopup({
      type: 'inline',

      fixedContentPos: false,
      fixedBgPos: true,

      overflowY: 'auto',

      closeBtnInside: true,
      preloader: false,

      midClick: true,
      removalDelay: 300,
      mainClass: 'my-mfp-zoom-in'
    });

    $('.popup-with-move-anim').magnificPopup({
      type: 'inline',

      fixedContentPos: false,
      fixedBgPos: true,

      overflowY: 'auto',

      closeBtnInside: true,
      preloader: false,

      midClick: true,
      removalDelay: 300,
      mainClass: 'my-mfp-slide-bottom'
    });
  });
</script>
-->
<!--//-->

<!--/MENU-JS-->
<!--<script>
  $(window).on("scroll", function () {
    var scroll = $(window).scrollTop();

    if (scroll >= 80) {
      $("#site-header").addClass("nav-fixed");
    } else {
      $("#site-header").removeClass("nav-fixed");
    }
  });

  //Main navigation Active Class Add Remove
  $(".navbar-toggler").on("click", function () {
    $("header").toggleClass("active");
  });
  $(document).on("ready", function () {
    if ($(window).width() > 991) {
      $("header").removeClass("active");
    }
    $(window).on("resize", function () {
      if ($(window).width() > 991) {
        $("header").removeClass("active");
      }
    });
  });
</script>-->
<!--//MENU-JS-->

<script>
function validateUserForm() {
    var oldPwd = document.getElementById('oldPassword').value;
    var newPwd = document.getElementById('prePassword').value;
    var confirmPwd = document.getElementById('password').value;
    var preEncrypted = document.getElementById('preEncryptedProblem').value.trim();
    var encrypted = document.getElementById('encryptedProblem').value.trim();

    if (newPwd && oldPwd && newPwd === oldPwd) {
        layer.msg('新密码不能和老密码相同！', {icon: 2});
        return false;
    }
    if (newPwd && confirmPwd && newPwd !== confirmPwd) {
        layer.msg('新密码和确认密码不一致！', {icon: 2});
        return false;
    }
    if (!preEncrypted) {
        layer.msg('密保为必填项！', {icon: 2});
        return false;
    }
    // 修改密保不是必填项
    return true;
}
</script>


